<template>
	<view class="container">

		<!-- 时间选择器 -->
		<!-- <view class="time-selector">
			<view class="time-label">选择时间：</view>
			<picker mode="date" fields="month" :value="currentDate" @change="dateChange">
				<view class="picker-value">{{ currentDate }}</view>
			</picker>
			<text class="arrow-icon">&#xe603;</text>
		</view> -->

		<!-- 医嘱列表 -->
		<scroll-view scroll-y class="advice-list" v-if="medicalAdvices.length > 0">
			<view class="advice-item" v-for="(item, index) in medicalAdvices" :key="index" @click="viewDetail(item)">
				<!-- 医嘱头部 -->
				<view class="advice-header">
					<view class="header-left">
						<text class="advice-title">{{ item.title }}</text>
						<text class="advice-tag"
							:class="{'tag-active': item.isActive}">{{ item.isActive ? '进行中' : '已结束' }}</text>
					</view>
					<text class="advice-date">{{ item.date }}</text>
				</view>

				<!-- 医嘱内容 -->
				<view class="advice-content">
					<!-- 医生信息 -->
					<view class="doctor-info">
						<image class="doctor-avatar" :src="item.doctorAvatar" mode="aspectFill"></image>
						<view class="doctor-detail">
							<text class="doctor-name">{{ item.doctorName }}</text>
							<text class="doctor-title">{{ item.department }} | {{ item.title }}</text>
						</view>
					</view>

					<!-- 医嘱详情 -->
					<view class="advice-details">
						<view class="detail-item" v-if="item.diagnosis">
							<text class="detail-label">诊断：</text>
							<text class="detail-value">{{ item.diagnosis }}</text>
						</view>
						<view class="detail-item" v-if="item.medicine">
							<text class="detail-label">用药：</text>
							<text class="detail-value">{{ item.medicine }}</text>
						</view>
						<view class="detail-item" v-if="item.examination">
							<text class="detail-label">检查：</text>
							<text class="detail-value">{{ item.examination }}</text>
						</view>
						<view class="detail-item" v-if="item.instructions">
							<text class="detail-label">注意事项：</text>
							<text class="detail-value">{{ item.instructions }}</text>
						</view>
					</view>
				</view>

				<!-- 医嘱底部 -->
				<view class="advice-footer">
					<view class="footer-buttons">
						<button class="footer-btn" @click.stop="viewPrescription(item)" v-if="item.hasPrescription">
							查看处方
						</button>
						<button class="footer-btn" @click.stop="viewExaminationResult(item)"
							v-if="item.hasExaminationResult">
							检查结果
						</button>
						<button class="footer-btn" @click.stop="makeAppointment(item)">
							复诊预约
						</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/empty-advice.png" mode="aspectFit"></image>
			<text>暂无医嘱信息</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 初始化当前日期
	const currentDate = ref(new Date().toISOString().split('T')[0].slice(0, 7));

	// 模拟医嘱数据
	const medicalAdvices = ref([{
		title: '感冒治疗医嘱',
		isActive: true,
		date: '2024-01-01',
		doctorAvatar: '/static/doctor-avatar.png',
		doctorName: '张三',
		department: '内科',
		diagnosis: '感冒',
		medicine: '感冒灵颗粒，每日三次，每次一包',
		examination: '血常规',
		instructions: '多喝水，注意休息',
		hasPrescription: true,
		hasExaminationResult: false
	}]);

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 日期选择改变事件
	const dateChange = (e) => {
		currentDate.value = e.detail.value;
		// 这里可以添加根据日期筛选医嘱的逻辑
	};

	// 查看医嘱详情
	const viewDetail = (item) => {
		console.log('查看详情:', item);
	};

	// 查看处方
	const viewPrescription = (item) => {
		console.log('查看处方:', item);
	};

	// 查看检查结果
	const viewExaminationResult = (item) => {
		console.log('查看检查结果:', item);
	};

	// 复诊预约
	const makeAppointment = (item) => {
		console.log('复诊预约:', item);
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.back-btn {
		font-size: 24px;
		cursor: pointer;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.placeholder {
		width: 24px;
	}

	.time-selector {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.time-label {
		margin-right: 10px;
	}

	.picker-value {
		margin-right: 5px;
	}

	.arrow-icon {
		font-size: 16px;
	}

	.advice-list {
		height: calc(100vh - 200px);
	}

	.advice-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.advice-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.advice-title {
		font-size: 18px;
		font-weight: bold;
		margin-right: 10px;
	}

	.advice-tag {
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.tag-active {
		background-color: #5cb85c;
		color: #fff;
	}

	.advice-date {
		font-size: 14px;
		color: #999;
	}

	.doctor-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.doctor-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.doctor-detail {
		display: flex;
		flex-direction: column;
	}

	.doctor-name {
		font-size: 16px;
		font-weight: bold;
	}

	.doctor-title {
		font-size: 14px;
		color: #999;
	}

	.advice-details {
		display: flex;
		flex-direction: column;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.detail-label {
		font-size: 14px;
		font-weight: bold;
		margin-right: 5px;
	}

	.detail-value {
		font-size: 14px;
	}

	.advice-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.footer-buttons {
		display: flex;
	}

	.footer-btn {
		margin-left: 10px;
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		background-color: #007aff;
		color: #fff;
		cursor: pointer;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: calc(100vh - 200px);
	}

	.empty-state image {
		width: 100px;
		height: 100px;
		margin-bottom: 20px;
	}

	.empty-state text {
		font-size: 16px;
		color: #999;
	}
</style>